<template>
  <!--机构管理-->
  <div class="org-admin">
    <div class="org-admin-header-seach">
      <el-input
        v-model="orgName"
        style="width: 240px"
        placeholder="请输入机构名称"
      />

      <div class="header-seach-item">
        <span>机构状态：</span>
        <el-select v-model="orgState" style="width: 140px">
          <el-option label="全部" :value="-1" />
          <el-option label="启用" :value="1" />
          <el-option label="禁用" :value="0" />
        </el-select>
      </div>
      <el-button @click="reset">重置</el-button>
      <el-button
        type="primary"
        style="margin-left: -10px"
        @click="getOrgList"
        color="rgb(222, 41, 16)"
        >查询</el-button
      >
    </div>
    <el-divider />
    <div class="org-admin-header">
      <div class="header-tip">
        总计
        <span class="header-tip-nember">{{ orgList?.total || 0 }}</span> 个机构
      </div>
      <div class="header-tip-botton">
        <el-button
          color="rgb(222, 41, 16)"
          type="primary"
          @click="addOrg"
          v-if="permissionState.update"
          ><el-icon><Plus /></el-icon>新建机构</el-button
        >
        <el-button color="rgb(222, 41, 16)" type="primary">导出excel</el-button>
      </div>
    </div>
    <div class="org-admin-table">
      <el-table
        :data="orgList?.list"
        stripe
        border
        style="width: 100%"
        :header-cell-style="tableHeaderColor"
        :cell-style="cellStyle"
        max-height="60vh"
      >
        <el-table-column prop="id" label="序号" width="180" />
        <el-table-column prop="orgName" label="机构全称" width="180" />
        <el-table-column prop="orgNameAlias" label="简称" width="180" />
        <el-table-column prop="token" label="APItoken" width="280" />
        <el-table-column prop="creatorName" label="创建人" />
        <el-table-column prop="createdAt" label="创建时间" />
        <el-table-column prop="state" label="状态" width="180">
          <template #default="scoped">
            <el-switch
              v-model="scoped.row.state"
              class="mb-2"
              size="small"
              style="
                --el-switch-on-color: rgb(0, 128, 255);
                --el-switch-off-color: #ff4949;
              "
              @change="changeOrgState(scoped.row.id, scoped.row.state)"
            />
            <span
              style="color: rgb(0, 128, 255); margin-left: 10px"
              v-if="scoped.row.state"
              >有效</span
            >
            <span
              style="color: rgb(219, 0, 64); margin-left: 10px"
              v-if="!scoped.row.state"
              >无效</span
            >
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          min-width="120"
          v-if="permissionState.update || permissionState.delete"
        >
          <template #default="scoped">
            <el-button
              link
              type="primary"
              size="small"
              v-if="permissionState.update"
              @click="eidtOrg(scoped.row.id)"
            >
              <span style="color: rgb(222, 41, 16)">编辑</span>
            </el-button>

            <el-button
              link
              type="info"
              size="small"
              disabled
              v-if="permissionState.delete && scoped.row.state"
              >删除</el-button
            >
            <el-button
              link
              type="primary"
              size="small"
              v-if="permissionState.delete && !scoped.row.state"
              @click="deleteOrg(scoped.row.id)"
              ><span style="color: rgb(222, 41, 16)">删除</span></el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="org-admin-pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orgList?.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import http from "@/request/request";
import { Data } from "@/request/pageData";
import { Permission } from "@/util/LocalStorgeGetPermission";

const router = useRouter();

interface Org {
  id: number;
  orgName: string;
  token: string;
  state: boolean;
  endDate: string;
  creatorName: string;
  createdAt: string;
  orgNameAlias: string;
}
//---------------------------------变量----------------------------------//
// table样式
const tableHeaderColor = {
  background: "rgb(245, 248, 250) !important",
  color: "rgb(51, 51, 51)",
  "text-align": "center",
};
const cellStyle = {
  "text-align": "center",
};
const orgList = ref<Data<Org>>();
const currentPage = ref(1);
const pageSize = ref(10);
const orgName = ref("");
const orgState = ref(-1);
const permissionState = ref({
  insert: false,
  update: false,
  delete: false,
});
//-------------------------------------方法------------------------------//
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  getOrgList();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  getOrgList();
};
// 新建机构
const addOrg = () => {
  router.push("/organizationEdit");
};
// 修改机构信息
const eidtOrg = (id: number) => {
  router.push("/organizationEdit?id=" + id);
};

// 修改状态
const changeOrgState = async (id: number, state: boolean) => {
  try {
    await http.post("/api/system/updateOrgStatus", { id, state });
    getOrgList();
  } catch (err) {
    console.log(err);
  }
};
// 重置
const reset = () => {
  orgName.value = "";
  orgState.value = -1;
};
const getOrgList = async () => {
  const params = {
    page: currentPage.value,
    pageSize: pageSize.value,
    orgName: orgName.value,
    state: orgState.value == -1 ? null : orgState.value == 1 ? true : false,
  };
  try {
    const { data } = await http.get<Data<Org>>(
      "/api/system/getOrgListByNameOrState",
      params
    );
    orgList.value = data;
  } catch (err) {
    console.log(err);
  }
};
// 删除机构
const deleteOrg = async (id: number) => {
  try {
    await http.post("/api/system/deleteOrganization?orgId=" + id);
    getOrgList();
  } catch (err) {
    console.log(err);
  }
};
// -----------------------------------------------------生命周期----------------------------------//
onMounted(() => {
  const p = new Permission("/organization").getPermission();
  if (!p) {
    router.push("/");
  } else {
    permissionState.value = p;
    getOrgList();
  }
});
</script>

<style lang="less" scoped>
.org-admin {
  background-color: rgb(255, 255, 255);
  width: 97%;
  height: 96%;
  padding: 20px;
}
.org-admin-header-seach {
  display: flex;
  gap: 20px;
}
.org-admin-header {
  display: flex;
  margin-bottom: 10px;
  .header-tip {
    width: 8%;
    .header-tip-nember {
      color: rgb(64, 158, 255);
    }
  }
  .header-tip-botton {
    width: 93%;
    display: flex;
    justify-content: end;
  }
}
.org-admin-pagination {
  position: absolute;
  right: 2%;
  top: 90%;
}
</style>